<template>
    <div class="column_magnet" :style="{width: columnWidth}">
        <div class="magnet_header">应用磁贴</div>
<!--        <div class="magnet_body clear_fix" v-if="lists.includes(sectionData.options.magnetStyleType)">-->
        <div class="magnet_body clear_fix" v-if="liBgLists.includes(magnetStyleType)">
            <div v-for="item in sectionData.data" :key="item.id" :class="['magnet_item', magnetType]" :style="{backgroundColor: item.LiBgc}">
                <div class="magnet_icon">
                    <span :class="['vportal', item.eachIcon]"></span>
                </div>
                <div class="magnet_name">{{item.eachName}}</div>
            </div>
        </div>
        <div class="magnet_body clear_fix" v-else-if="iconBgLists.includes(magnetStyleType)">
            <div v-for="item in sectionData.data" :key="item.id" :class="['magnet_item', magnetType]">
                <div class="magnet_icon" :style="{backgroundColor: item.LiBgc}">
                    <span :class="['vportal', item.eachIcon]"></span>
                </div>
                <div class="magnet_name">{{item.eachName}}</div>
            </div>
        </div>
        <div class="magnet_body clear_fix" v-else>
            <div v-for="item in sectionData.data" :key="item.id" :class="['magnet_item', magnetType]">
                <div class="magnet_icon" :style="{color: item.LiBgc}">
                    <span :class="['vportal', item.eachIcon]"></span>
                </div>
                <div class="magnet_name">{{item.eachName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ColumnMagnet',
    props: {
        magnetStyleType: {
            type: String,
            default: 'type_5'
        },
        sectionData: {
        }
    },
    data() {
        return {
            columnWidth: "568px",
            liBgLists: ['type_1', 'type_4', 'type_5'],
            iconBgLists: ['type_2', 'type_3']
        }
    },
    computed: {
        magnetType(){
            // switch(this.sectionData.options.magnetStyleType) {
            switch(this.magnetStyleType) {
                // 多彩卡片
                case 'type_1':
                    return 'type_1 clear_fix';
                    break;
                // 多彩圆形 
                case 'type_2':
                    return 'type_2';
                    break;
                // 多彩方形1
                case 'type_3':
                    return 'type_3';
                    break;
                // 多彩方形2
                case 'type_4':
                    return 'type_4';
                    break;
                // 多彩矩形
                case 'type_5':
                    return 'type_5';
                    break;
                // 简约1
               case 'type_6':
                    return 'type_6';
                    break;
                default: 
                    return 'type_2'
            }
        }  
    },
    methods: {

    }, 
  
}
</script>

<style>
.column_magnet{
    background: #fff;
    box-shadow: 0px 3px 6px 0px rgb(221 221 221 / 35%);
    border-radius: 6px;
    margin-left: 20px;
}
.magnet_header{
    height: 20px;
    line-height: 20px;
    padding: 13px 15px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    border-bottom: #ccc 1px solid;
}
/* .app_card_body{
    width: 100%;
    padding: 15px;
} */
.magnet_body{
    padding: 15px;
}
.magnet_body .magnet_item{
    float: left;
    border-radius: 6px;
    cursor: pointer;
    border: solid 1px rgba(255,255,255,0.5);
    box-shadow: 0 5px 14px 0 rgb(150 161 172 / 24%);
    text-align: center;
}
.magnet_body .magnet_item .magnet_icon{
    text-align: center;
    color: #fff;
}
.magnet_body .magnet_item .magnet_name{
    text-align: center;
    color: #fff;
    font-size: 12px;
}
.magnet_body .type_1 .magnet_icon{
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 22px;
    background: rgba(0,0,0,.1);
    border-radius: 100%;
    float: left;
    margin-left: 14px;
    margin-top: 16px;
}
.magnet_body .type_1 .magnet_name{
    height: 64px;
    line-height: 64px;
    float: left;
    margin-left: 14px;
}
.magnet_body .type_2 .magnet_icon, .magnet_body .type_3 .magnet_icon{
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px;
    margin-left: 11px;
    background: #000;
    box-shadow: 0 5px 14px 0 rgb(150 161 172 / 24%);
    border: solid 1px rgba(255,255,255,0.5);
}
.magnet_body .type_2 .magnet_icon{
    border-radius: 100%;
}
.magnet_body .type_3 .magnet_icon{
    border-radius: 10px;
}
.magnet_body .type_2 .magnet_name, .magnet_body .type_3 .magnet_name{
    width: 58px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 5px;
    margin-left: 5px;
    color: #000;
}
.magnet_body .type_4 .magnet_icon{
    width: 30px;
    font-size: 30px;
    height: 30px;
    margin: 10px 25px;
}
.magnet_body .type_4 .magnet_name{
    width: 58px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    margin-left: 11px;
}
.magnet_body .type_5 .magnet_icon{
    width: 20px;
    font-size: 20px;
    height: inherit;
    margin-left: 24px;
    float: left;
}
.magnet_body .type_5 .magnet_name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    margin-left: 10px;
}
.magnet_body .type_6 .magnet_icon{
    width: 20px;
    font-size: 20px;
    height: inherit;
    float: left;
}
.magnet_body .type_6 .magnet_name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    margin-left: 10px;
    color: #333;
    line-height: 26px;
}
.type_1{
    width: 150px;
    height: 64px;
    margin-right: 24px;
    margin-bottom: 14px;
}
.type_2{
    width: 70px;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
.type_3{
    width: 70px;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
.type_4{
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.type_5{
    width: 171px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #fff;
}
.type_6{
    padding: 18px 10px 10px 10px;
}
/* 清除浮动： */
.clear_fix::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear_fix{
    zoom: 1;
}
</style>